Previously , I have introduce you about bootstrap in Introduction Bootstrap, now we will discuss the components related with bootstrap .In this article, I’m explaining about bootstrap component
Start:
Firstly I create a simple project in mvc4.
Open Microsoft Visual Studio >> Click on File >> New >> Project >> Select ASP.NET MVC 4 Web Application
In my sample give the name of app “BootstrapComponent” >> Location >> Click “Ok” >> Select “Empty” Template click “Ok”
Use these three files in your application.
<link href="@Url.Content("~/Content/bootstrap-3.1.1-dist/css/bootstrap.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/scripts/jquery-2.1.0.min.js")"></script>
<script src="@Url.Content("~/scripts/bootstrap-3.1.1-dist/js/bootstrap.min.js")"></script>
1:- Bootstrap Button
How to Use Bootstrap Button:-
Bootstrap Button use multiple classes like btn-group, btn btn-default,btn btn-
primary,btn btn-info,btn btn-success, btn btn-danger,btn btn-warning and much
more.
A. Button Groups Horizontal Variation:-
Example:
<h1>Use Of Button Group Horizontal Variation</h1>
<div class="btn-group">
<button type="button" class="btn btn-default">Button1</button>
<button type="button" class="btn btn-default">Button2</button>
<button type="button" class="btn btn-default">Button3</button>
<button type="button" class="btn btn-default">Button4</button>
</div>
Result:
B. Button Groups Vertical Variation:-
Example:
<h1>Use Of Button Group Vertical Variation</h1>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Button1</button>
<button type="button" class="btn btn-default">Button2</button>
<button type="button" class="btn btn-default">Button3</button>
</div>
Result:
C. Button group toolbar:-
Example:
<h1>Use Of Bootstrap Button Toolbar</h1>
<div class="btn-toolbar" role="toolbar" style="margin: 0;">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">4</button>
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">7</button>
</div>
</div>
Result:
D. Button group Justify:-
Example:
<h1>Use of Button group Justify</h1>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Button1</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button3</button>
</div>
</div>
Result:
E. Button Sizing:-
Example:
<h1>Use of Button Sizing</h1>
<h4>Large Button</h4>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Button1</button>
<button type="button" class="btn btn-default">Button2</button>
<button type="button" class="btn btn-default">Button3</button>
</div>
<h4>Normal Button</h4>
<div class="btn-group">
<button type="button" class="btn btn-default">Button1</button>
<button type="button" class="btn btn-default">Button2</button>
<button type="button" class="btn btn-default">Button3</button>
</div>
<h4>small Button</h4>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">Button1</button>
<button type="button" class="btn btn-default">Button2</button>
<button type="button" class="btn btn-default">Button3</button>
</div>
<h4>Extra small Button</h4>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">Button1</button>
<button type="button" class="btn btn-default">Button2</button>
<button type="button" class="btn btn-default">Button3</button>
</div>
Result:
F. Button with Dropdown:-
Example:
<div class="btn-group">
<button type="button" class="btn btn-primary" data-toggle="dropdown">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Article</a></li>
<li class="divider"></li>
<li><a href="#">Blog</a></li>
<li class="divider"></li>
<li><a href="#">Forum</a></li>
<li class="divider"></li>
<li><a href="#">Interview</a></li>
</ul>
</div>
Result:
2:- Bootstrap Input Group
Bootstrap textbox use input groups for more attractive textbox extends form
control after and before or both side use input group with addon.
A. Input Group With addon:
Example:
<h2>use input group with addon</h2>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">OK</span>
</div>
Result:
3. Bootstrap Tabs
Example:
<h1>Use of Bootstrap Tab with Dropdown</h1>
<ul class="nav nav-tabs" role="tablist" data-tabs="tabs" id="tabs">
<li class="active"><a href="#account" data-toggle="tab">Account</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Developer Section <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#article">Article<span class="badge pull-right">42</span></a></li>
<li><a href="#blog">Blog<span class="badge pull-right">42</span></a></li>
<li><a href="#forum">Forum</a></li>
<li><a href="#interview">Interview</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="row tab-pane active" id="account">
<h3>Account Section</h3>
</div>
<div class="row tab-pane" id="profile">
<h3>Profile Page</h3>
</div>
<div class="row tab-pane" id="article">
<h3>Article Section</h3>
</div>
<div class="row tab-pane" id="blog">
<h3>Blog Section</h3>
</div>
<div class="row tab-pane" id="forum">
<h3>Forum Section</h3>
</div>
<div class="row tab-pane" id="interview">
<h3>Interview Section</h3>
</div>
</div>
JavaScript:
<script>
$('#tabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('.btn-toggle').click(function () {
$(this).find('.btn').toggleClass('active');
if ($(this).find('.btn-success').size() > 0) {
$(this).find('.btn').toggleClass('btn-success');
}
$(this).find('.btn').toggleClass('btn-default');
});
</script>
Result:
4. Bootstrap Pills
Example:
<h1>Use Of Bootstrap Pills</h1>
<br />
<br />
<ul class="nav nav-pills">
<li class="active"><a href="#account" data-toggle="tab">Account</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#developer" data-toggle="tab">Developer</a></li>
</ul>
<div class="tab-content">
<div class="row tab-pane active" id="account">
<h3>Account Section</h3>
</div>
<div class="row tab-pane" id="profile">
<h3>Profile Page</h3>
</div>
<div class="row tab-pane" id="developer">
<h3>Developer Page</h3>
</div>
</div>
Result:
5. Bootstrap Header Menu
Example:
<h1>Bootstrap Responsive Header Menu</h1>
<br />
<br />
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Brand", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">@Html.ActionLink("Home", "", "")</li>
<li>@Html.ActionLink("Article", "", "")</li>
<li>@Html.ActionLink("Blog", "", "")</li>
<li>@Html.ActionLink("Forum", "", "")</li>
<li>@Html.ActionLink("Interview", "", "")</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li><a href="../default/">Default</a></li>
<li class="divider"></li>
<li><a href="../amelia/">Amelia</a></li>
<li><a href="../cerulean/">Cerulean</a></li>
<li><a href="../cosmo/">Cosmo</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>@Html.ActionLink("Sign Up", "", "")</li>
<li>@Html.ActionLink("Login", "", "")</li>
<li>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
</ul>
</nav>
</div>
</header>
Result:
6. Bootstrap Paging
Example:
<div class="col-md-6 text-center" style="border: 1px solid black;">
<h1>Use of Bootstrap Paging</h1>
<br />
<br />
<p class="well pageno">Page 1</p>
<p class="pagenolist"></p>
</div>
Here is my JavaScript code:
<script>
$('.pagenolist').bootpag({
total: 5
}).on("page", function (event, num) {
$(".pageno").html("Page " + num);
$(this).bootpag({ total: 10, maxVisible: 10 });
});
</script>
Download this JavaScript file
https://raw.githubusercontent.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js
After download this file drag and drop in your page
<script src="@Url.Content("~/scripts/jquery.bootpag.min.js")"></script>
Result:
7. Bootstrap Highlight Label
Example:
<h1>Available variations for label highlight</h1>
<br />
<br />
<label class="label label-default">Page 1 of 100</label>
<label class="label label-info">Page 1 of 100</label>
<label class="label label-primary">Page 1 of 100</label>
<label class="label label-success">Page 1 of 100</label>
<label class="label label-warning">Page 1 of 100</label>
<label class="label label-danger">Page 1 of 100</label>
Result:
8. Bootstrap Badges
This components use to highlight to unread items.
Example:
<h1>Use of bootstrap Badges</h1>
<br />
<a href="#">Inbox <span class="badge">42</span></a>
Result:
9. Bootstrap Page Header
In a single row use page header inside h1 tag then you use utilize the h1 default
small element, as well as other componets .
Example:
<h1 class="text-primary">Use of Bootstrap Page Header</h1>
<div class="page-header">
<h1>Mindstick software pvt. ltd.<small>Unleash your Imagination</small></h1>
</div>
Result:
10. Bootstrap Alerts
Provide textual message for user you can use alert. Alerts don’t have default class
only base class and modifier class.
Example:
<h1>Use of Bootstrap alert</h1>
<br />
<br />
<div class="alert alert-success" role="alert">
<strong>Success Alert !</strong> You can use alert for show the message
</div>
<div class="alert alert-info" role="alert">
<strong>Info Alert !</strong> You can use alert for show the message
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning Alert !</strong> You can use alert for show the message
</div>
<div class="alert alert-danger" role="alert">
<strong>Danger Alert !</strong> You can use alert for show the message
</div>
Result:
11. Bootstrap Progress Bar
Progress bars representing low single digit percentages, as well as 0%,
Example:
<h1>Use of Bootstrap Progress bar</h1>
<br />
<br />
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">45% Complete</span>
</div>
</div>
JavaScript code is here:
<script>
var c = 1;
$(document).ready(function () {
setInterval(setProgressBarValue,1000);;
});
function setProgressBarValue() {
$('.progress-bar').css('width', c + '%');
c += 2;
}
</script>
Result:
12. Bootstrap Panel with Heading
You can use panel sometimes you need to put some paragraph, and othr textual
information in a box then use panel component.
Example:
<h1>Use of Bootstrap Panel Component</h1>
<br />
<br />
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Popular Tag</h3>
</div>
<div class="panel-body">
<a class="label label-info">Java </a> <a class="label label-info"> jquery </a> <a class="label label-info"> HTML5 </a> <a class="label label-info"> CSS3</a>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Tag</h3>
</div>
<div class="panel-body">
<a class="label label-info">Java </a> <a class="label label-info"> jquery </a> <a class="label label-info"> HTML5 </a> <a class="label label-info"> CSS3</a>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Popular Tag</h3>
</div>
<div class="panel-body">
<a class="label label-info">Java </a> <a class="label label-info"> jquery </a> <a class="label label-info"> HTML5 </a> <a class="label label-info"> CSS3</a>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Popular Tag</h3>
</div>
<div class="panel-body">
<a class="label label-info">Java </a> <a class="label label-info"> jquery </a> <a class="label label-info"> HTML5 </a> <a class="label label-info"> CSS3</a>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Popular Tag</h3>
</div>
<div class="panel-body">
<a class="label label-info">Java </a> <a class="label label-info"> jquery </a> <a class="label label-info"> HTML5 </a> <a class="label label-info"> CSS3</a>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Popular Tag</h3>
</div>
<div class="panel-body">
<a class="label label-info">Java </a> <a class="label label-info"> jquery </a> <a class="label label-info"> HTML5 </a> <a class="label label-info"> CSS3</a>
</div>
</div>
Result:
Thank you for read this article I hope very helpful for you.
Next Article we explain Bootstrap components - Part2
Leave Comment